<div class="play-sound">
    <div class="button button-small padding-horizontal" ng-disabled="isLoading" ng-click="play()">
        <!--正常喇叭图标-->
        <i class="icon ion-social-rss" ng-show="!isLoading && !isPlaying"></i>
        <!--播放中喇叭动态图标-->
        <i class="icon ion-social-rss playing" ng-show="isPlaying"></i>
        <!--loading svg图标-->
        <svg width='15px' height='15px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" ng-show="isLoading"
             preserveAspectRatio="xMidYMid" class="uil-spin">
            <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
            <g transform="translate(50 50)">
                <g transform="rotate(0) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0s" dur="1s"
                                          repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(45) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.12s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.12s"
                                          dur="1s" repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(90) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.25s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.25s"
                                          dur="1s" repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(135) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.37s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.37s"
                                          dur="1s" repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(180) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.5s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.5s" dur="1s"
                                          repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(225) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.62s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.62s"
                                          dur="1s" repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(270) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.75s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.75s"
                                          dur="1s" repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
                <g transform="rotate(315) translate(34 0)">
                    <circle cx="0" cy="0" r="8" fill="#555">
                        <animate attributeName="opacity" from="1" to="0.1" begin="0.87s" dur="1s"
                                 repeatCount="indefinite"></animate>
                        <animateTransform attributeName="transform" type="scale" from="1.1" to="1" begin="0.87s"
                                          dur="1s" repeatCount="indefinite"></animateTransform>
                    </circle>
                </g>
            </g>
        </svg>
    </div>
    <!--正在加载图标-->
    <span ng-bind="dur|DurFilter" ng-if="!isLoading&&!isError"></span>
    <!--加载失败图标，点击重新加载-->
    <span class="icon ion-ios-refresh refresh" ng-if="isError" ng-click="reload()"></span>
    <!--未读消息图标-->
    <span class="icon ion-record new" ng-if="isNew && !isLoading&&!isError"></span>
</div>
